<template>
  <div>
    <!-- Form -->
         <!-- <p>查看和修改</p> -->
         <router-link to="/index/myapp" class="styleaddBingli router-link-active">个人信息</router-link>
    <!-- 下面是栅格系统 -->
       <div class="bigwhite">
    <el-row>
        <el-col :span="4"><div><h3>我的信息</h3></div></el-col>
        <el-col :span="2" :offset="18"><div><i class="el-icon-edit"  @click="edit">修改信息</i></div></el-col>
    </el-row>
    
    <el-divider></el-divider>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      class="demo-ruleForm"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item prop="name">
              <p>医生名称</p>
              <el-input v-model="ruleForm.name" class="nameBingren"></el-input>
            </el-form-item>

            <!-- ?性别和年龄 -->

            <el-row>
              <el-col :span="12">
                <el-form-item prop="sex">
                  <div>
                    <p>性别</p>
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别" class="sexclass">
                      <el-option label="男" value="男"></el-option>
                      <el-option label="女" value="女"></el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-form-item prop="age">
                    <p>年龄</p>
                    <el-input v-model="ruleForm.age" class="sexclass"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <!-- 日期年和月 -->

            <el-row>
              <el-col :span="12">
                <el-form-item prop="years">
                      <p>出生日期</p>
                      <div class="block">
                        <el-date-picker
                          v-model="ruleForm.years"
                          type="year"
                          placeholder="选择年">
                        </el-date-picker>
                        <!-- <span class="demonstration">年</span> -->
                      </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="month">
                    <p>出生日期</p>
                    <div class="block">
                      <el-date-picker
                        v-model="ruleForm.month"
                        type="month"
                        placeholder="选择月">
                      </el-date-picker>
                      <!-- <span class="demonstration">月</span> -->
                    </div>
                </el-form-item>
              </el-col>
            </el-row>

            <!--  电话-->
            <el-form-item prop="phone">
              <p>联系电话</p>
              <el-input v-model="ruleForm.phone" class="nameBingren"></el-input>
            </el-form-item>
            <!--  address-->
            <el-form-item prop="address">
              <p>地址</p>
              <el-input v-model="ruleForm.address" class="nameBingren"></el-input>
            </el-form-item>

          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            
                <el-form-item prop="ms">
                     <p>就职医院</p>
                      <el-input v-model="ruleForm.ms" class="nameBingren"></el-input>
                  </el-form-item>
                  <el-form-item  prop="desc">
                    <p>医院级别</p>
                        <el-select v-model="ruleForm.yiyuan" placeholder="请选择医院级别" class="sexclass">
                      <el-option label="三甲" value="三甲"></el-option>
                      <el-option label="二甲" value="二甲"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item  prop="gm">

                    <p>医院地址</p>
                    <el-select v-model="porvinxe" placeholder="请选择" class="sexclass">
                    <el-option
                v-for="item in options"
                :key="item.name"
                :value="item.name"
                >
                {{item.name}}
                 </el-option>
                </el-select>
            <span>省</span>
                    <el-select v-model="city" placeholder="请选择" class="sexclass">
                    <el-option
                v-for="cityitem in newarry"
                :key="cityitem.name"
                :value="cityitem.name"
                >
                {{cityitem.name}}
                 </el-option>
                </el-select>
            <span>市</span>

                  </el-form-item>
                  <el-form-item  prop="desc">
                      <p>所属科室</p>
                      <el-input v-model="ruleForm.zd" class="nameBingren"></el-input>

               
                  </el-form-item>
       
                   <el-form-item prop="zd">
                     <p>医院地址</p>
                      <el-input v-model="ruleForm.zd" class="nameBingren"></el-input>
                  </el-form-item>
            
            </div>
            </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  prop="xq">
              <p>医生简介</p>
              <el-input type="textarea" placeholder="简介。。。。。" v-model="ruleForm.xq" class="a nameBingren"></el-input>
            </el-form-item>
            <el-form-item  prop="bz">
              <p>工作经历</p>
              <el-input placeholder="工作经历。。。。。" type="textarea" v-model="ruleForm.bz" class="a nameBingren"></el-input>
            </el-form-item>
            <el-form-item  prop="sc">
              <p>相关证明上传</p>
              <el-upload
                  class="upload-demo upload"
                  drag
                  v-model="ruleForm.sc"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text nameBingren">将文件拖到此处，或<em>点击上传诊断报告</em></div>
                </el-upload>
            </el-form-item>
            
          </div>
        </el-col>
      </el-row>

      <el-form-item class="db" v-if="showbtn">
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即创建
          </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import '../../assets/css/reset.scss'
export default {
  name: "myapp",
  data() {
    return {
      dialogFormVisible: false,
      showbtn:false,
      select:"",
      form: {
        //弹窗
        phone: "",
      },
      formLabelWidth: "120px",
      ruleForm: {
        name: "888",
        age: "",
        sex: "",
        yiyuan:"",
        yiyuandizhi:"",
        years:"",
        month:"",
        phone:"",
        address:"",

        ms:"",
        gm:"",
        zd:"",
        xq:"",
        bz:"",
        sc:""
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        years: [{ required: true, message: "请选择年", trigger: "change" }],
        month: [{ required: true, message: "请选择年", trigger: "change" }],
        phone: [{ required: true, message: "请输入phone", trigger: "blur" }],
        address: [{ required: true, message: "请输入adddress", trigger: "blur" }],
        ms: [{ required: true, message: "请输入就诊科室", trigger: "blur" }],
        desc: [{ required: true, message: "请输入病情描述", trigger: "blur" }],
        gm: [{ required: true, message: "是否有过敏史", trigger: "blur" }],
        zd: [{ required: true, message: "请输入诊断医生", trigger: "blur" }],
        xq: [{ required: true, message: "请输入用药详情", trigger: "blur" }],
        bz: [{ required: true, message: "未输入备注", trigger: "blur" }],
        sc: [{ required: true, message: "未上传文件", trigger: "blur" }],
      },
       options: [
           {name:"北京",sub:[ {name: "东城区1"}, {name: "西城区"}, {name: "崇文区"}, {name: "宣武区"}, {name: "朝阳区"}, {name: "海淀区"}, {name: "丰台区"}, {name: "石景山区"}, {name: "房山区"}, {name: "通州区"}, {name: "顺义区"}, {name: "昌平区"}, {name: "大兴区"}, {name: "怀柔区"}, {name: "平谷区"}, {name: "门头沟区"}, {name: "密云县"}, {name: "延庆县"}, {name: "其他"}]},
           {name:"河南",sub:[{name: "郑州"}, {name: "周口"}, {name: "驻马店"}, {name: "开封"}, {name: "洛阳"}, {name: "信阳"}, {name: "濮阳"}, {name: "许昌"}, {name: "平顶山"}, {name: "通州区"}, {name: "顺义区"}, {name: "昌平区"}, {name: "大兴区"}, {name: "怀柔区"}, {name: "平谷区"}, {name: "门头沟区"}, {name: "密云县"}, {name: "延庆县"}, {name: "其他"}]},
           {name:"上海",sub:[ {name: "黄浦区"}, {name: "卢湾区"}, {name: "徐汇区"}, {name: "长宁区"}, {name: "静安区"}, {name: "普陀区"}, {name: "闸北区"}, {name: "虹口区"}, {name: "杨浦区"}, {name: "宝山区"}, {name: "闵行区"}, {name: "嘉定区"}, {name: "松江区"}, {name: "金山区"}, {name: "青浦区"}, {name: "南汇区"}, {name: "奉贤区"}, {name: "浦东新区"}, {name: "崇明县"}, {name: "其他"}]},
           {name:"广州",sub:[ {name: "越秀区"}, {name: "荔湾区"}, {name: "海珠区"}, {name: "天河区"}, {name: "白云区"}, {name: "黄埔区"}, {name: "番禺区"}, {name: "花都区"}, {name: "南沙区"}, {name: "萝岗区"}, {name: "增城市"}, {name: "从化市"}, {name: "其他"}]},
       ],
       porvinxe:"北京市",
       city:"朝阳区",
       newarry:[],
      
      localrow:""
    };
  },

watch:{//监听porvinxe，city
      porvinxe() {
        this.updateCity();
        // console.info('Province='+this.porvinxe)
      },
      city() {
          this.updateCity();
        // console.info('city='+this.city)
      },
    },
//    beforeMount: function () {
//       this.updateCity();
//     },
  mounted() {
      //调用updatecity函数
 this.updateCity();

  //  this.localrow=sessionStorage.getItem("row");
  //  var obj=JSON.parse(this.localrow)


      // this.ruleForm.name=obj.name
  
  },

  methods: {
      //二级联动城市选择
      updateCity() {
        for (let i=0;i<this.options.length;i++) {
          let obj = this.options[i].name;
          if (obj == this.porvinxe) {
            this.newarry = this.options[i].sub;
            //   console.log(this.city)
            return;
          } else {
              this.newarry = this.options[0].sub;
          }
        }
      },

    edit(){ //单机编辑按钮
       this.showbtn=!this.showbtn

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      if (this.form.phone == "") {
        this.$message.error("错了哦，请输入正确的手机号");
      } else {
        this.dialogFormVisible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.router-link-active {
  background: #16dcb8;
  padding: 14px 35px;
  margin-left: 20px;

  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
  color: white;
  display: inline-block;
  background-image: linear-gradient(to right, #2dc6e1, #14dfba);
}
.alretconent .el-dialog {
  width: 20% !important;
}
p {
  color: #999;
}
.bq{
  height: 140px;
}
.db{
  text-align: center;
}
.a{
  height: 75px;
}

.el-icon-edit{
  color: red;
  cursor: pointer;
}
 .sexclass{
	width: 150px;
  }
</style>